import React, { useState, useMemo, useCallback } from 'react'
import "../assets/styles/Discount.css"
import AddDiscount from './AddDiscount'
import UpdateDiscount from "./UpdateDiscount"
import Model from './Model'
import Pageing from './Pageing'

export default function Discount() {
    const [tableData, setTableData] = useState([{
        time: [
            "2021-01-13 17:39:42",
            "2023-01-13 17:39:42"
        ],
        useTime: [
            "2023-01-13 17:39:42",
            "2023-02-13 17:39:42"
        ],
        _id: "63919f95024a7602dc78082a",
        title: "测试优惠券",
        receiveType: "2",
        price: 100,
        state: false,
        show: false,
        system_data: true,
        create_time: "2022-12-08T08:25:57.209Z",
        imgSrc: "https://pic.616pic.com/ys_bnew_img/00/06/12/6QLoLGyq3C.jpg"
    },
    {
        time: [
            "2021-01-13 17:39:42",
            "2023-01-13 17:39:42"
        ],
        useTime: [
            "2022-01-13 17:39:42",
            "2024-01-13 17:39:42"
        ],
        _id: "63bd14c40d58511b7c6b6b18",
        title: "跨店满减",
        receiveType: "1",
        price: 200,
        state: true,
        show: true,
        create_time: "2023-01-10T07:33:24.011Z",
        imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
    },
    {
        time: [
            "2021-01-13 17:39:42",
            "2023-01-13 17:39:42"
        ],
        useTime: [
            "2022-01-13 17:39:42",
            "2024-01-13 17:39:42"
        ],
        _id: "63bd14c40d58511b7c6b6b19",
        title: "新人券",
        receiveType: "2",
        price: 220,
        state: true,
        show: true,
        create_time: "2023-01-10T07:33:24.011Z",
        imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
    },
    {
        time: [
            "2021-01-13 17:39:42",
            "2023-01-13 17:39:42"
        ],
        useTime: [
            "2022-01-13 17:39:42",
            "2024-01-13 17:39:42"
        ],
        _id: "63bd14c40d58511b7c6b6b20",
        title: "满100减20",
        receiveType: "3",
        price: 303,
        state: true,
        show: true,
        create_time: "2023-01-10T07:33:24.011Z",
        imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
    },
    {
        time: [
            "2021-01-13 17:39:42",
            "2023-01-13 17:39:42"
        ],
        useTime: [
            "2022-01-13 17:39:42",
            "2022-01-15 17:39:42"
        ],
        _id: "63bd14c40d58511b7c6b6b21",
        title: "数码产品券",
        receiveType: "1",
        price: 309,
        state: true,
        show: true,
        create_time: "2023-01-10T07:33:24.011Z",
        imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
    },
    {
        time: [
            "2021-01-13 17:39:42",
            "2023-01-13 17:39:42"
        ],
        useTime: [
            "2022-01-13 17:39:42",
            "2022-02-13 17:39:42"
        ],
        _id: "63bd14c40d58511b7c6b6b22",
        title: "跨店满减",
        receiveType: "2",
        price: 199,
        state: true,
        show: true,
        create_time: "2023-01-10T07:33:24.011Z",
        imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
    },
    {
        time: [
            "2021-01-13 17:39:42",
            "2023-01-13 17:39:42"
        ],
        useTime: [
            "2022-01-13 17:39:42",
            "2022-01-13 17:39:42"
        ],
        _id: "63bd14c40d58511b7c6b6b23",
        title: "中秋现礼券",
        receiveType: "3",
        price: 299,
        state: true,
        show: true,
        create_time: "2023-01-10T07:33:24.011Z",
        imgSrc: "https://pic2.zhimg.com/v2-12943651b8b7fb48144151e638c8ed81_1440w.jpg?source=172ae18b"
    }])
    const [searchType, setSearchType] = useState("title")
    const [searchData, setSearchData] = useState("")
    const [isVisible, setIsVisible] = useState(false)
    const [isVisible2, setIsVisible2] = useState(false)
    const [tempObj, setTempObj] = useState({ _id: "", title: "", receiveType: "", state: false })
    const [currentPage,setCurrentPage] = useState(1)
    const [pageSize,setPageSize] = useState(3)

    const filterTypeData = (data) => {
        switch (data) {
            case "1": return "新人券"
            case "2": return "通用券"
            case "3": return "门槛券"
            default:
                return "福利券"
        }
    }
    const res = useCallback(()=>{
        return currentPage * 10
    },[currentPage])
    const filterTimeDate = (data) => {
        const begin = data[0]
        const end = data[1]
        const beginData = new Date(begin)
        const endData = new Date(end)
        const times = endData - beginData
        return (times / 1000 / 60 / 60 / 24) + "天"
    }

    const deleteRow = (id) => {
        const array = [...tableData]
        const index = array.findIndex(item => item._id == id)
        array.splice(index, 1)
        setTableData(array)
    }

    const changeSearchType = (event) => {
        const value = event.target.value
        console.log(value);
        setSearchType(value)
    }

    const getSearchData = (event) => {
        const value = event.target.value
        setSearchData(value)
    }

    const list = useMemo(() => {
        return tableData.filter(item => {
            if (!searchData) {
                return true
            } else {
                //item.title
                if (item[searchType].indexOf(searchData) != -1) {
                    return true
                }
            }
        })
    }, [searchData,tableData])

    const addTask = () => {
        setIsVisible(true)
    }

    const updateDiscountEvent = (id) => {
        setIsVisible2(true)
        const objData = tableData.find(item => item._id == id)
        setTempObj(objData)
    }
    const titleChangeEvent = (event)=>{
        const newObj = {...tempObj}
        const value = event.target.value
        console.log(value);
        newObj.title = value
        setTempObj(newObj)

    }

    const fenye = (page)=>{
        setCurrentPage(page)
    }

    const sortAesc = ()=>{
        const temp = [...tableData]
        temp.sort((a,b)=>{
            return a.price - b.price
        })
        // temp.sort((a,b)=>{
        //     return b.price - a.price
        // })
        console.log(temp);
        setTableData(temp)
    }
    return (
        <div className='box'>
            <h2>列表渲染</h2>
            <div className='search'>
                <div>
                    <select name="" id="" onClick={changeSearchType}>
                        <option value="">请选择</option>
                        <option value="title">优惠券名字</option>
                        <option value="receiveType">优惠券类型</option>
                    </select>
                </div>
                <div>
                    {searchType == "title" ?
                        <input type="text" onBlur={getSearchData} placeholder='请输入搜索内容' /> :
                        <select name="" id="" onChange={getSearchData}>
                            <option value="">请选择</option>
                            <option value="1">新人券</option>
                            <option value="2">通用券</option>
                            <option value="3">门槛券</option>
                        </select>
                    }
                </div>
                <div>
                    <button>搜索</button>
                    <button onClick={addTask}>添加</button>
                </div>
            </div>
            <div className='mytable'>
                <table>
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>优惠券名称</th>
                            <th>优惠券图片</th>
                            <th>优惠券类型</th>
                            <th>面值 <span onClick={sortAesc}>^</span><span>#</span></th>
                            <th>使用时间</th>
                            <th>是否开启</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {list.slice((currentPage-1)*pageSize,(currentPage-1)*pageSize + pageSize).map(item => {
                            return (
                                <tr key={item._id}>
                                    <td>{item._id}</td>
                                    <td>{item.title}</td>
                                    <td>
                                        <img width="100px" src={item.imgSrc} alt="" />
                                    </td>
                                    <td>{filterTypeData(item.receiveType)}</td>
                                    <td>{item.price}</td>
                                    <td>{filterTimeDate(item.useTime)}</td>
                                    <td>{item.state ? "开启" : "关闭"}</td>
                                    <td>
                                        <button onClick={() => updateDiscountEvent(item._id)}>修改</button>
                                        <button onClick={() => deleteRow(item._id)}>删除</button>
                                    </td>
                                </tr>
                            )
                        })}
                        {/* <tr>
                            <td>001</td>
                            <td>001</td>
                            <td>001</td>
                            <td>001</td>
                            <td>001</td>
                            <td>001</td>
                            <td>001</td>
                            <td>001</td>
                        </tr> */}
                    </tbody>
                </table>
            </div>
            {/* <AddDiscount></AddDiscount> */}
            {/* <UpdateDiscount></UpdateDiscount> */}
            {/* 添加功能 */}
            <Pageing fenye={fenye} currentPage={currentPage} pageSize={pageSize} total={list.length}></Pageing>
            <Model visible={isVisible} modelTitle="添加优惠券" close={setIsVisible}>
                <div className='item'>
                    <label htmlFor="">优惠券名字：</label>
                    <input name='title' type="text" placeholder="请输入名字" />
                </div>
                <div className='item'>
                    <label htmlFor="">优惠券类型：</label>
                    <select name="receiveType">
                        <option value="1">通用券</option>
                        <option value="2">商品券</option>
                        <option value="3">新人券</option>
                    </select>
                </div>
                <div className='item'>
                    <span>状态：</span>
                    <label htmlFor="" >开启</label>
                    <input name='state' value="on" type="radio" />
                    <label htmlFor="" >关闭</label>
                    <input name='state' value="off" type="radio" />
                </div>
                <div className='item'>
                    <span>学历：</span>
                    <label htmlFor="">本科</label>
                    <input type="checkbox" value="bk" />
                    <label htmlFor="">专科</label>
                    <input type="checkbox" value="zk" />
                </div>
                <div>
                    <button>添加</button>
                </div>
            </Model>
            <Model visible={isVisible2} modelTitle="修改优惠券" close={setIsVisible2}>
                <div className='item'>
                    <label htmlFor="">优惠券编号：</label>
                    <input name='_id' readOnly defaultValue={tempObj._id} type="text" placeholder="请输入名字" />
                </div>
                <div className='item'>
                    <label htmlFor="">优惠券名字：</label>
                    <input name='title' onChange={titleChangeEvent} value={tempObj.title} type="text" placeholder="请输入名字" />
                </div>
                <div className='item'>
                    <label htmlFor="">优惠券类型：</label>
                    <select name="receiveType">
                        <option value="1">通用券</option>
                        <option value="2">商品券</option>
                        <option value="3">新人券</option>
                    </select>
                </div>
                <div className='item'>
                    <span>状态：</span>
                    <label htmlFor="" >开启</label>
                    <input name='state' value="on" type="radio" />
                    <label htmlFor="" >关闭</label>
                    <input name='state' value="off" type="radio" />
                </div>
                <div>
                    <button>修改</button>
                </div>
            </Model>
            <p>{res()}</p>
        </div>
    )
}
